<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src='swfobject.js'>
</script>
<script type="text/javascript" src='js/StaticData.js'>
</script>
<script type="text/javascript" src='js/Phone.js'>
</script>
<link rel="stylesheet" type="text/css" href="styles/trackbar.css" />
<script type="text/javascript" src="js/trackbar.js"></script>

<script type="text/javascript">

function trackBarChange(val)
{
}

function positionStatus(e){	
	flashphoner = e.ref;
}

var params = {};
params.menu = "true";
params.swliveconnect = "true";
params.allowfullscreen = "true";
params.allowscriptaccess = "always";
params.wmode = "transparent";
var attributes = {};
var flashvars={}
flashvars.config="flashphoner.xml";
if (swfobject.hasFlashPlayerVersion("10.0.12")) {
	swfobject.embedSWF("jsphone.swf", "jsSWFDiv", "215", "138", "10.0.12", "expressInstall.swf", flashvars, params,attributes,positionStatus);
}
</script>

<title>Phone</title>
<style type="text/css">
	   
  button::-moz-focus-inner, 
  input[type="reset"]::-moz-focus-inner, 
  input[type="button"]::-moz-focus-inner, 
  input[type="submit"]::-moz-focus-inner, 
  input[type="file"] > input[type="button"]::-moz-focus-inner { 
            border: none; 
            }
     
  #jsSWFDiv, #phoneDiv, #loginDiv, #incomingDiv, #connectingDiv, #settingsDiv{
            position: absolute; 
            } 
   	
  #settingsDiv {
            top: 80px;
            left: 5px;
            height: 130px; 
            width: 215px; 
            background: #fff; 
            padding: 0px 0 0 15px;
            font: 12px Arial; 
            visibility: hidden;
            background: url(assets/mic_settings_background.png);
            }
 	
  #jsSWFDiv {
            top: 0px;
            left: 230px;
            }

  #loginDiv {
            top: 75px;
            left: 5px;
            height: 115px; 
            width: 200px; 
            border: 1px solid #ddd; 
            padding: 10px; 
            font: 12px Arial; 
            float: left;
            background: #fff;
            visibility: hidden;
            -moz-opacity: 0.95;
            -khtml-opacity: 0.95;
            opacity: 0.95;
            }
   	
  #phoneDiv { 
            left: 30px;
            height: 240px; 
            width: 147px; 
            background: #fff; 
            padding: 10px;
            position: relative;
            }
   	
  #incomingDiv { 
            left: 50px;
            top: 80px;
            }
   	
  #connectingDiv { 
            top: 50px;    
            left: 10px;
            height: 115px; 
            width: 200px; 
            border: 1px solid #ddd; 
            padding: 10px; 
            font: 12px Arial; 
            float: left;
            background: #fff;
            visibility: hidden;
            -moz-opacity: 0.95; /* Mozilla 1.6 */
            -khtml-opacity: 0.95; /* Konqueror 3.1, Safari 1.1 */
            opacity: 0.95; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9+ */
   	            } 
   	
  #loggedUserDiv {
            font: 12px Arial;
            width: 48%; 
            height: 14px;
            float: left;
            text-align: right; 
            }
   	
 .button    {
            background: #dcdcdc;
            width: 46px;
            height: 22px;
            float: left;
            margin: 0px 3px 3px 0; 
            text-align: center;                    
            font: bold 16px Arial;
            line-height: 22px;
            border: 1px outset;
            -moz-user-select: none;
            -khtml-user-select: none;
            user-select: none;  
            outline: none;
            }

 .call_button {
            width: 144px; 
            background-color: #009800;
            float: left;
            height: 30px;
            font: 20px Arial;
            color: #fff;
            text-align: center;
            line-height: 30px;
            border: 1px outset;
            -moz-user-select: none;
            -khtml-user-select: none;
            user-select: none;
            cursor: default; 
            margin-bottom: 3px;  
            }
    
  .login_link {
            width: 42px;
            height: 14px; 
            font: 12px Arial;
            text-decoration: underline;
            -moz-user-select: none;
            -khtml-user-select: none;
            user-select: none;
            cursor: pointer; 
            float: left;
            border: none;
            background: #fff;
            padding: 0;
            color: #bb6666;
            text-align: left;
            }

  .phone_screen {
            width: 144px;
            height: 90px;
            background: #deeeff;
            float: left;
            margin: 3px 0 2px 0;
            font: 22px Arial;
            border: 1px solid #b7babc;
            color: #5a5a5a;
            }             
               
  .login_label {
            float: left; 
            width: 100px; 
            height: 22px; 
            line-height: 22px;                                
            }            
                
  .login_input {
            float: left; 
            width: 100px;
            height: 22px; 
            }                   
   	
  #phoneDiv      {z-index: 1;}
  #loginDiv      {z-index: 2;}
  #incomingDiv   {z-index: 3;}   	
  #connectingDiv {z-index: 4;}
  #jsSWFDiv      {z-index: 5;}   	
  #settingsDiv   {z-index: 6;}

</style>


</head>


<body>

<!-- JS phone -->
<div id="phoneDiv">
      <div style="width: 33%; float: left;"> <input class="login_link" id="loginMainButton" type="submit" value="Log in" onClick="if (getElement('loginMainButton').value == 'Log in'){openLoginView();}else{logoff();}"></div>
      <div style="width: 33%; float: left;" id="loggedUserDiv"></div>
      <div style="width: 33%; float: left;"> <input class="login_link" id="settingsButton" type="submit" value="Mic Settings" onClick="openSettingsView();"></div>
      <input class="phone_screen" type="textarea" id="calleeText" rows="40"> 
      <input class="call_button" id="callButton" type="submit" value="Call" onClick="if (getElement('callButton').value == 'Call'){call();}else{hangup();}" onmousedown="this.style.border='1px inset';" onmouseup="this.style.border='1px outset';" onmouseout="this.style.border='1px outset';">
      <input class="button" type="submit" value="1" onclick="getElement('calleeText').value += '1';" onmousedown="this.style.border='1px inset';" onmouseup="this.style.border='1px outset';" onmouseout="this.style.border='1px outset';">
      <input class="button" type="submit" value="2" onclick="getElement('calleeText').value += '2';" onmousedown="this.style.border='1px inset';" onmouseup="this.style.border='1px outset';" onmouseout="this.style.border='1px outset';">
      <input class="button" type="submit" value="3" onclick="getElement('calleeText').value += '3';" onmousedown="this.style.border='1px inset';" onmouseup="this.style.border='1px outset';" onmouseout="this.style.border='1px outset';">
      <input class="button" type="submit" value="4" onclick="getElement('calleeText').value += '4';" onmousedown="this.style.border='1px inset';" onmouseup="this.style.border='1px outset';" onmouseout="this.style.border='1px outset';">
      <input class="button" type="submit" value="5" onclick="getElement('calleeText').value += '5';" onmousedown="this.style.border='1px inset';" onmouseup="this.style.border='1px outset';" onmouseout="this.style.border='1px outset';">
      <input class="button" type="submit" value="6" onclick="getElement('calleeText').value += '6';" onmousedown="this.style.border='1px inset';" onmouseup="this.style.border='1px outset';" onmouseout="this.style.border='1px outset';">
      <input class="button" type="submit" value="7" onclick="getElement('calleeText').value += '7';" onmousedown="this.style.border='1px inset';" onmouseup="this.style.border='1px outset';" onmouseout="this.style.border='1px outset';">
      <input class="button" type="submit" value="8" onclick="getElement('calleeText').value += '8';" onmousedown="this.style.border='1px inset';" onmouseup="this.style.border='1px outset';" onmouseout="this.style.border='1px outset';">
      <input class="button" type="submit" value="9" onclick="getElement('calleeText').value += '9';" onmousedown="this.style.border='1px inset';" onmouseup="this.style.border='1px outset';" onmouseout="this.style.border='1px outset';">
      <input class="button" type="submit" value="*" onclick="getElement('calleeText').value += '*';" onmousedown="this.style.border='1px inset';" onmouseup="this.style.border='1px outset';" onmouseout="this.style.border='1px outset';">
      <input class="button" type="submit" value="0" onclick="getElement('calleeText').value += '0';" onmousedown="this.style.border='1px inset';" onmouseup="this.style.border='1px outset';" onmouseout="this.style.border='1px outset';">
      <input class="button" type="submit" value="#" onclick="getElement('calleeText').value += '#';" onmousedown="this.style.border='1px inset';" onmouseup="this.style.border='1px outset';" onmouseout="this.style.border='1px outset';">
</div>
<!-- End of JS phone -->

<!-- Login form -->
<div id="loginDiv">
     <div class="login_label">Username</div>
     <div class="login_input"><input type="text" id="username" value="VKP001" style="width: 100px;"></div>
     <div class="login_label">Password</div>
     <div class="login_input"><input type="text" id="password" value="VKP001" style="width: 100px;"></div>
     <div class="login_label">Server</div>
     <div class="login_input"><input type="text" id="server" value="sipnet.ru" style="width: 100px;"></div>
     <div class="login_label">Port</div>
     <div class="login_input"><input type="text" id="port" value="5060" style="width: 100px;"></div>
     <input class="button" id="loginButton" type="submit" value="Log in" onClick="if (getElement('loginButton').value == 'Log in'){login();}else{logoff();}" style="background: #eee; margin: 7px 70px 0 70px; width: 60px;" onmousedown="this.style.border='1px inset';" onmouseup="this.style.border='1px outset';" onmouseout="this.style.border='1px outset';">
</div>
<!-- End of login form -->


<!-- Incoming call view -->
<div id="incomingDiv" style="height: 75px; width: 126px; background: #ddd; border: 1px solid #bbb; padding: 5px; font: 12px Arial; visibility:hidden;">
  <div style="float: left; width: 120px; text-align: center; margin-bottom: 10px;">Incoming call</div>
  <div style="float: left; width: 120px; text-align: center; margin-bottom: 10px;" id="callerField"></div>
  <div style="float: left; margin: 2px;"><input id="answerButton" type="submit" value="Answer" onClick="answer();closeIncomingView();" style="width: 58px; background-color: #ddffdd;"></div>
  <div style="float: left; margin: 2px;"><input id="hangupButton" type="submit" value="Hangup" onClick="hangup();closeIncomingView();" style="width: 58px; background-color: #ffdddd;"></div>
</div>
<!-- End of incoming call view -->

<!-- Connecting view -->
<div id="connectingDiv">
  <div id="connectingText" style="float: left; width: 200px; height: 115px; text-align: center; margin-bottom: 0px; text=align: center; line-height: 115px;">Connecting...</div>
</div>
<!-- End of connecting view -->

<div id="jsSWFDiv">
	<a href="http://www.adobe.com/go/getflashplayer">
		<img border="0" src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
	</a>
</div>

<!-- Settings view -->
<div id="settingsDiv">
	<input class="button" type="submit" value="X" onclick="closeSettingsView();" style="margin: 3px 0pt 0pt 192px; width: 20px;" onmousedown="this.style.border='1px inset';" onmouseup="this.style.border='1px outset';" onmouseout="this.style.border='1px outset';">
	<script type="text/javascript">
		trackbar.getObject('micVolume').init({
			onMove : function() {
				micVolume = this.leftValue;	
			},
			dual : false, // two intervals
			width : 150, // px
			leftValue : 100, // unit of value
			rightLimit : 100, // unit of value
			rightValue : 0 // unit of value
		});
	</script>
	<script type="text/javascript">
		trackbar.getObject('speakerVolume').init({
			onMove : function() {
				speakerVolume = this.leftValue;	
			},
			dual : false, // two intervals
			width : 150, // px
			leftValue : 100, // unit of value
			rightLimit : 100, // unit of value
			rightValue : 0 // unit of value
		});
	</script>
	
	<input class="button" type="submit" value="Save" onclick="saveMicSettings();" style="margin: 3px 0 0 75px; width: 50px;" onmousedown="this.style.border='1px inset';" onmouseup="this.style.border='1px outset';" onmouseout="this.style.border='1px outset';">
	
</div>
<!-- End of settings view -->

<p><textarea id="console" rows="20" cols="100"></textarea></p>

</body>
</html>